<template>
  <div class="news">
    <div class="news-list">
      <ul>
        <li v-for="(item, index) in newsList" :key="index">
          <a href="javascript:void(0)" @click="goDetail(item.id)">{{item.title}}</a>
        </li>
      </ul>
      <pagination
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        :total="total"
        @pagination="getNewsList">
      </pagination>
    </div>
  </div>
</template>
<script>
import api from '@/api'
import Pagination from '@/components/Pagination.vue'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      newsList: [],
      query: {
        pageNum: 1,
        pageSize: 12
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    getNewsList() {
      this.loading = true
      const id = this.currNavInfo ?  this.currNavInfo.id: ''
      const params = {
        ...this.query,
        categoryId: id,
        type: !id ? this.firstNav.type: ''
      }
      api.getContentList(params).then(res => {
        this.newsList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    goDetail(id) {
      const path = this.$route.path.replace(/\/[^/]+$/, '');
      this.saveNavInfo()
      this.$router.push({path: `${path}-detail?id=${id}`})
    }
  },
  created() {
  },
  watch: {
    'currNavInfo.id': {
      handler() {
        this.getNewsList()
      },
      immediate: true
    },
  }
}
</script>
<style lang="scss" scoped>
.news {
  width: 100%;
  height: 100%;
  .news-list {
    width: 100%;
    height: 100%;
    ul {
      li {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #dedede;
        padding: 0 0 0 20px;
        background: url(~@/assets/images/sysimages/6.jpg) no-repeat 5px 18px;
        a {
          float: left;
          font-size: 14px;
          &:hover {
            color: #365897;
          }
        }
        span {
          float: right;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
